<script setup >
import { computed, ref } from "vue";
import { btnControlHook } from "./js/index";
// 控制语音的显示和隐藏

let {
  btnStatus,
  connectWebSocket,
  // 当前的状态
  innerText,
  recorder,
  readSentence,
  // 要识别的单词
} = btnControlHook();
const flag = ref(false);

// 定义存储单词的数组
let arrWords = ref([
  "where are you",
  "Please give my regards to Tom",
  "Hello world",
  "Good morning",
  "What is your name?",
  "How are you",
  "Excuse me, what is your name?",
  "Thank you very much!",
  "Miss Li, you are very beautiful",
]);
// 读取单词的索引
let i = ref(0);
// 计算当前要使用的单词
let worlds = computed(() => arrWords.value[i.value]);

// icon 图标的切换

let isSpeak = computed(()=> !flag.value ? 'icon-zhinengkouyu' :'icon-tingzhi')


const handler = () => {
  flag.value = true;

  if (btnStatus.value === "UNDEFINED" || btnStatus.value === "CLOSED") {
    connectWebSocket(worlds.value);
  } else if (btnStatus.value === "CONNECTING" || btnStatus.value === "OPEN") {
    // 结束录音
    recorder.stop();

    flag.value = false;
  }
};

// 点击切换单词
let getNextWords = () => {
  console.log(i.value);
  console.log(worlds);
  i.value < arrWords.value?.length - 1 ? i.value++ : (i.value = 0);
  handler();
};

// 转换成百分制总分
const getPercentage = (score) => parseInt(((+score)/5 * 100))


</script>
<template>
  <el-card class="m20 evaluation">
    <!-- TODO1: 集成讯飞口语水平测试的API -->

    <el-row type="flex" class="rows">
      <el-col :span="12" class="evaluation_l">
        <h1>{{ worlds }}</h1>
        <div class="icon">
          <span class="iconfont icon-laba"></span>
          <span @click="handler" :class="['iconfont' ,'iconfont_speak', isSpeak ]"></span>
          <span
            @click="getNextWords"
            class="icon-xiayigexiayiqu iconfont"
          ></span>
        </div>

        <div class="tips">
          {{ innerText }} <span v-if="flag" class="tit">点击停止结束录音</span>
        </div>
        <div class="tips" v-if="flag">
          <span class="start-taste-line">
            <hr class="hr1" />
            <hr class="hr2" />
            <hr class="hr3" />
            <hr class="hr4" />
            <hr class="hr5" />
            <hr class="hr6" />
            <hr class="hr7" />
            <hr class="hr8" />
            <hr class="hr9" />
            <hr class="hr10" />
          </span>
        </div>
      </el-col>
      <el-col :span="12"  class="evaluation_r"  >
        <!--  v-if="readSentence?.accuracy_score" -->
        <div class="left"  v-if="readSentence?.accuracy_score">
          <p>
            准确度分：
            <!-- <span id="accuracy_score">{{
              readSentence?.accuracy_score
            }}</span> -->
          

            <el-progress
            :text-inside="true"
            :stroke-width="15"
            :percentage="getPercentage(readSentence?.accuracy_score)"
            status="success"
          />
          </p>
          <p>
            流畅度分： 
            <el-progress
            :text-inside="true"
            :stroke-width="15"
            :percentage="getPercentage(readSentence?.fluency_score)"

            color="#ff6740"
       
            status="success"
          />
          </p>
          <p>
            完整度分：
             <el-progress
            :text-inside="true"
            :stroke-width="15"
            :percentage="getPercentage(readSentence?.integrity_score)"

            color="#3a92ec"
            status="success"
          />
          </p>

          <p>
            总　　分： 
            <el-progress
            :text-inside="true"
            :stroke-width="15"
            :percentage="getPercentage(readSentence?.total_score)"

            color="#fcb827"
            status="success"
          />
          </p>
        </div>
      </el-col>
    </el-row>

    <!-- <button
      @click="handler"
      class="taste-button start-button taste-ml160"
      type="button"
    >
      {{ innerText }}
    </button> -->
  </el-card>
</template>
<style  scoped  lang="scss">
// loadding 和 话筒的背景颜色
$bgc: #ff6740;
.evaluation {
  min-height: calc(100vh - 110px);
  .rows {
    min-height: calc(100vh - 110px);
    align-items: center;
  }
}
@keyframes note {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(4);
  }
}
.start-taste-line {
  display: flex;
}
.start-taste-line hr {
  background-color: $bgc;
  width: 1px;
  height: 4px;
  margin: 0 5px;
  display: inline-block;
  border: none;
  animation: note 0.2s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.start-taste-line .hr1,
.start-taste-line .hr4,
.start-taste-line .hr5,
.start-taste-line .hr9,
.start-taste-line .hr8 {
  animation-delay: 0.2s;
}

.taste-button {
  background: #187cff;
  border: 1px solid;
  border-color: #478eea;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  height: 40px;
  width: 160px;
  font-size: 16px;
  letter-spacing: 6px;
  border: none;
  outline: none;
}
// 定义基础变量
$fs: 30px;
.evaluation_l {
  text-align: center;

  .icon {
    margin-top: 59px;
    .iconfont {
      border-radius: 50%;
      padding: 8px;
      cursor: pointer;
      font-size: $fs;
    }
    .iconfont_speak {
      font-size: $fs + 5;
      color: #fff;
      background: $bgc;
      margin: 0 50px;
    }

    .icon-tingzhi {
       
        color: #fff;
    }

    .icon-laba {
      background-color: #ffe9ad;
      color: #fbb827;
    }

    .icon-xiayigexiayiqu {
      background-color: #cef9fa;
      color: #58d7d9;
    }
  }

  .tips {
    .tit {
      color: $bgc;
      margin-left: 20px;
    }
    color: #666666;
    font-size: $fs - 12;
    margin-top: 50px;

    display: flex;
    justify-content: center;
  }
}


.evaluation_r {
    p {
        display: flex;
        align-items: center;
        margin: 30px 0;
        > span {
            margin: 0 5px;
        }
        .el-progress {
            flex: 1;
        }
    }
}
</style>